<!DOCTYPE html>
<html>
{% load staticfiles %}
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
    <title>废品回收系统注册</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}">

</head>
<body>
<div class="loginbox dialogbox">
    <h1>账号登录</h1>
    <div class="close jsCloseDialog"><img src="/static/images/dig_close.png"/></div>
    <div class="cont">
        <form id="jsLoginForm" autocomplete="off">
            <div class="box">
                <span class="word3">用户名</span>
                <input type="text" name="account_l" id="account_l" placeholder="手机号/邮箱" />
            </div>
            <div class="box">
                <span class="word2">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</span>
                <input type="password" name="password_l" id="password_l" placeholder="请输入您的密码"/>
            </div>
            <div class="error btns login-form-tips" id="jsLoginTips"></div> <!--登录错误提示-->
            <div class="btns">
                <span><input type="checkbox" id="jsAutoLogin" />&nbsp;自动登录</span>
                <span class="forget btn fr">忘记密码</span>
            </div>
            <div class="button">
                <input type="button" value="登录" id="jsLoginBtn" />
            </div>
            <div class="btns">
                <span class="fr">没有账号？<span class="regist btn">立即注册</span></span>
            </div>
        </form>
    </div>
</div>
<div class="dialog" id="jsDialog">
    <!--提示弹出框-->
    <div class="successbox dialogbox" id="jsSuccessTips">
        <h1>成功提交</h1>
        <div class="close jsCloseDialog"><img src="/static/images/dig_close.png"/></div>
        <div class="cont">
            <h2>您的需求提交成功！</h2>
            <p></p>
        </div>
    </div>
</div>

<div class="bg" id="dialogBg"></div>
<header>
    <div class="c-box fff-box">
        <div class="wp header-box">
            <p class="fl hd-tips">废品回收系统平台！</p>
            <ul class="fr hd-bar">
                <li>服务电话：<span>4001008031</span></li>
                <li><a href="/user/login">[登录]</a></li>
                <li class="active"><a href="/user/register">[注册]</a></li>
            </ul>
        </div>
    </div>
</header>
<section>
    <div class="c-box bg-box">
        <div class="login-box clearfix">
            <div class="hd-login clearfix">
                <a class="index-logo" href="/index/"></a>
                <h1>用户注册</h1>
                <a class="index-font" href="/index/">回到首页</a>
            </div>
            <div class="fl slide">
                <div class="imgslide">
                    <ul class="imgs">

                        <li><a href=""><img width="483" height="472" src="/static/images/16.png" /></a></li>

                        <li><a href=""><img width="483" height="472" src="/static/images/17.png" /></a></li>

                        <li><a href=""><img width="483" height="472" src="/static/images/18.jpg" /></a></li>

                    </ul>
                </div>
                <div class="unslider-arrow prev"></div>
                <div class="unslider-arrow next"></div>
            </div>
            <div class="fl form-box">
                <div class="tab">
                    <h2 class="active">手机注册</h2>
                </div>
                <div class="tab-form">
                    <form id="phone_register_form" method="post" action="{% url 'user:register' %}" autocomplete="off">
                        <input type='hidden' name='csrfmiddlewaretoken' value='gTZljXgnpvxn0fKZ1XkWrM1PrCGSjiCZ' />
                        <div class="form-group marb20 {% if register_form.errors.email %}errorput{% endif %}">
                            <label>手&nbsp;&nbsp;&nbsp;&nbsp;机&nbsp;</label>
                            <input  type="text" id="id_email" name="phone" value="{{ register_form.phone.value }}" placeholder="请输入您的手机号" />
                        </div>
                        <div class="form-group marb8 {% if register_form.errors.password %}errorput{% endif %}">
                            <label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                            <input type="password" id="id_password" name="password"  value="{{ register_form.password.value }}" placeholder="请输入6-20位非中文字符密码" />
                        </div>
                        <div class="form-group marb8 captcha1 {% if register_form.errors.captcha %}errorput{% endif %}">
                            <label>验&nbsp;证&nbsp;码</label>
                            <input  type="text" id="id_captcha_0" name="code"
                                   placeholder="输入验证码"/>
                            <input class="getcode getting" type="button" id="id_captcha_1" value="获取验证码"/>
                        </div>
                        <div class="form-group marb8">
                            <label>身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份</label>

                            <label>&nbsp;&nbsp;<input type="radio" name="role" value="0"
                                                      checked="checked">社区人员</label>
                            <label>&nbsp;&nbsp;<input type="radio" name="role"
                                                            value="1"
                            >工作人员</label>
                        </div>
                        <div class="error btns" id="jsEmailTips">{% for key, error in register_form.errors.items %}{{ error }}{{ msg }}{% endfor %}
                        </div>
                        <div class="auto-box marb8">
                        </div>
                        <input class="btn btn-green" id="jsEmailRegBtn" type="submit" value="注册并登录" />
                        {% csrf_token %}
                    </form>
                </div>
                <p class="form-p">已有账号？<a href="{% url 'user:login' %}">[立即登录]</a></p>
            </div>
        </div>
    </div>
</section>

<input id="isLogin" type="hidden" value="False"/>
<script src="/static/js/jquery.min.js" type="text/javascript"></script>
<script src="/static/js/unslider.js" type="text/javascript"></script>
<script src="/static/js/validateDialog.js"  type="text/javascript"></script>
<script src="/static/js/login.js"  type="text/javascript"></script>

<script>
    $(function () {
        $('#id_captcha_1').on('click', function () {
            sendPhoneCode($(this))
        });
    });

    function sendPhoneCode($btn) {
        $.ajax({
            cache: false,
            type: "post",
            dataType: 'json',
            url: "/user/send_phone_code/",
            data: $('#phone_register_form').serialize(),
            async: true,
            beforeSend: function (XMLHttpRequest) {
                $btn.val("发送中...").show(3000);
                $btn.attr('disabled', true);
            },
            success: function (data) {
                if (data.email) {
                    Dml.fun.showValidateError($('#jsChangePhone'), data.email);
                } else if (data.status == "success") {
                    Dml.fun.showErrorTips($('#jsEmailTips'), "手机号成功");
                    setTimeout(function () {
                        location.reload();
                    }, 1000);
                } else {
                    Dml.fun.showValidateError($('#id_email'), "手机号失败");
                }
            }
        });
    }
</script>
</body>
</html>